.button-group {
  @include inline-block();
  vertical-align: middle;

  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }

  .button {
    position: relative;
    float: left;
    border-radius: 0;
  }

  .button:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  .button:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  .button:hover,
  .button:focus,
  .button:active,
  .button.actived {
    z-index: 2
  }

  .button + .button {
    margin-left: -1px;
  }

}
